import React, { Component } from 'react';
import { StyleSheet, View, Text, PixelRatio, Image, TouchableOpacity, Animated } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { orderStyle, commonStyle, commen } from '../_common/style';
import { style } from '../../../../theme/style';
import { CURRENCY } from '../../../../utils/helper';
import MethodUtil from '../../../../utils/MethodUtil';

import { LieCpt } from './LieCpt';
import navigationSeevice from '../../../../components/navigation/navigationSeevice';
const scale = GLOBAL.SCALE;
export class GoodsCpt extends Component {
	constructor(props) {
		super(props);
		console.log('props.data', props.data)
		this.state = {
			startHeight: 0,
			imgObj: new Animated.Value(0),
		}
		this.onOff = true;
	}

	// 动画
	_startAnimated = () => {
		let { isHeight, startHeight, heightObj, imgObj } = this.state;
		if (isHeight) {
			Animated.timing(imgObj, { toValue: 1, duration: 300, }).start()
			Animated.timing(heightObj, { toValue: 0, duration: 600, }).start(() => { this.setState({ isHeight: 0 }) });
		} else {
			Animated.timing(imgObj, { toValue: 0, duration: 300, }).start()
			Animated.timing(heightObj, { toValue: startHeight, duration: 600 }).start(() => { this.setState({ isHeight: startHeight }) })
		}
	}

	_onLayout = (event) => {
		let startHeight = event.nativeEvent.layout.height;
		if (this.onOff) {
			this.setState({
				startHeight,
				heightObj: new Animated.Value(startHeight),
				isHeight: startHeight,
			})
			this.onOff = false
		}
	}


	// 显示 基准日/基准月
	_describe = (goodsInfo) => {
		let { formulaSettleType, formulaSettleName, formulaCustomValue } = goodsInfo || {};
		let results = null;
		if (formulaSettleType === 'BASE_DATE') {  // 基准日
			if (formulaCustomValue) {
				results = `基准日: ${formulaCustomValue}`;
			} else {
				results = formulaSettleName;
			}
		} else if (formulaSettleType === 'MONTHLY_AVG') {  //基准月
			if (formulaCustomValue) {
				results = `基准月: ${formulaCustomValue}`;
			} else {
				results = formulaSettleName;
			}
		} else {  //日期范围
			if (formulaSettleName) {
				results = `日期范围: ${formulaSettleName}`;
			}
		}
		return results;
	}


	render() {
		let { goodsData, orderData, flagData } = this.props.data || {};
		let { zxyOrderId } = orderData || {};
		let { heightObj, imgObj } = this.state;
		let { tCode, orderType } = flagData || {};
		let { goodsName, price, priceType, quantity, udPrice, currency, amount,
			qualityStd, qualityRemark, qualityStdName, priceFormulaDesc,
			analyseProfit, sourceData, ysPercent, uomName, makePlace } = goodsData;
		const spin = imgObj.interpolate({
			inputRange: [0, 1],//输入值
			outputRange: ['0deg', '180deg'] //输出值
		})
		let timeStr = this._describe(goodsData);
		return (
			<View style={styles.block}>
				<View style={{ marginBottom: 15, paddingHorizontal: 15 }}>
					<View style={styles.orderCol}>
						<View>
							<Text style={styles.orderValTitle}>{goodsName || null}</Text>
						</View>
						<View>
							<View style={{ flexDirection: "row", alignItems: 'center' }}>
								<Text style={[styles.priceType, priceType == 2 ? { color: '#FA6400', backgroundColor: '#FBEFE8' } : { color: '#85C0EC', backgroundColor: '#ECF7FF' }]}>
									{priceType == 2 ? '暂定价' : '一口价'}
								</Text>
								<Text style={styles.orderVal}>
									¥ {MethodUtil.toThousands(price || 0, 2)}{CURRENCY.getUnit(currency).text}/{uomName}
								</Text>
							</View>
							<View style={{ alignItems: 'flex-end', marginTop: 5 * scale }}>
								<Text style={{ fontSize: 12, color: '#8D8D8D' }}>
									数量 ：{quantity ? quantity : 0}{uomName}
								</Text>
							</View>
						</View>
					</View>
				</View>
				<View style={{
					alignItems: 'center', flexDirection: 'row', marginTop: 14, width: '100%', justifyContent: 'space-between', borderBottomColor: '#E3E7F0', borderBottomWidth: 1
				}}>
					<Text onPress={() => { navigationSeevice.navigate('relevanceDetailPage', { resultData: orderData, flagData }) }}
						style={[styles.goodsLoad, { paddingTop: 10 * scale, paddingBottom: 5 * scale }]} >
						[关联{orderType == 'S' ? '' : '意向/'}{orderType == 'P' ? '销售' : '采购'}]
						</Text>
					<Text style={styles.goodsTotal}>{`合计 : ${amount == null ? '--' : MethodUtil.toThousands(amount || 0, 2)}`}{CURRENCY.getUnit(currency).text}</Text>
				</View>
				<Text style={{
					alignItems: 'center', flexDirection: 'row', marginTop: 14, width: '100%', flexWrap: 'wrap', paddingHorizontal: 15
				}}>
					<Text style={{ fontSize: 11, color: '#000' }}>
						品质：{qualityStdName}
					</Text>
					{priceFormulaDesc ?
						<Text style={{ fontSize: 11, color: '#000' }}>
							| {priceFormulaDesc}
						</Text> : null
					}
					{ysPercent ?
						<Text style={{ fontSize: 11, color: '#000' }}>
							| 溢短装率{(ysPercent * 100).toFixed(2)}%
						</Text> : null
					}

					{priceType == 2 && (udPrice || udPrice === 0) ?
						<Text style={{ fontSize: 11, color: '#000' }}>，升贴水:{(udPrice >= 0 ? '+' : '')}{udPrice}元/吨</Text> : null}
					{timeStr ? <Text style={{ fontSize: 11, color: '#000' }}> | {timeStr}</Text> : null}
					{
						makePlace ? <Text style={{ fontSize: 11, color: '#000' }}> | 原产地：{makePlace}</Text> : null
					}
				</Text>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	goodsBox: {
		...commen.edge,
		...commen.edge2,
	},
	goodsPriceType: {
		color: style.color.fontRed1,
		fontSize: 14 * scale,
		marginLeft: 4 * scale
	},
	goodsPrice: {
		color: style.color.font1,
		fontSize: 14 * scale
	},
	goodsInfo: {
		fontSize: 12 * scale,
		color: style.color.font1,
		opacity: .7
	},
	goodsInfoBox: {
		marginTop: 5 * scale
	},
	goodsXian: {
		fontSize: 12 * scale,
		opacity: .7,
		paddingLeft: 4 * scale,
		paddingRight: 4 * scale
	},
	goodsTotal: {
		textAlign: 'right',
		color: style.color.font1,
		fontSize: 12 * scale,
		paddingTop: 20 * scale,
		paddingBottom: 8 * scale,
		fontWeight: 'bold',
		paddingHorizontal: 15 * scale
	},
	goodsDown: {
		borderTopWidth: 1 / PixelRatio.get(),
		borderTopColor: '#E4E4E4',
		paddingTop: 15 * scale
	},
	goodsLoad: {
		color: style.color.fontBlue,
		paddingTop: 25 * scale,
		paddingBottom: 15 * scale,
		textAlign: 'right',
		fontSize: 11,
		paddingHorizontal: 15 * scale
	},
	downImg: {
		width: 12 * scale,
		height: 12 * scale,
	},
	hezi: {
		width: 40 * scale,
		height: 40 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	},
	orderCol: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'flex-start',
		paddingBottom: 10 * scale
	},
	orderText: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	orderVal: {
		fontSize: 12 * scale,
		color: '#000'
	},
	orderValTitle: {
		fontSize: 13,
		color: '#0C0C0D',
		fontWeight: '600',
		lineHeight: 18 * scale,
		maxWidth: 150 * scale,
		flexWrap: 'wrap',
		marginTop: -2 * scale
	},
	priceType: {
		backgroundColor: '#FBEFE8',
		borderRadius: 2 * scale,
		paddingVertical: 2 * scale,
		paddingHorizontal: 5 * scale,
		fontSize: 11,
		color: '#FA6400',
		marginRight: 5 * scale
	},
	block: {
		backgroundColor: '#fff',
		marginTop: 15 * scale,
		borderRadius: 4 * scale,
		paddingTop: 12 * scale,
		paddingBottom: 12 * scale,
	}
})